<template>
  <view class="mine tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn('/minePages/set')">
        <view class="custom-nav__back">
          <view class="tn-icon-message tn-color-cat" style="font-size: 50rpx;" @click="tn('/myPages/message')">
          </view>
        </view>
      </view>
    </tn-nav-bar>
    <view class="top-backgroup">
      <image src='https://tnuiimage.tnkjapp.com/my/my-bg4.png' mode='widthFix' class='backgroud-image'></image>
    </view>

    <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" style="margin-top: -450rpx;">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="logo-pic tn-shadow">
              <view class="logo-image">
                 <view class="tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg');width: 110rpx;height: 110rpx;background-size: cover;">
                 </view>
              </view>
            </view>
            <view class="tn-padding-right">
              <view class="tn-padding-right tn-padding-left-sm">
                <text v-if="isLogin" class="tn-color-cat tn-text-xl tn-text-bold">{{  userInfo.phone }}</text>
                <tn-button v-else shape="round" backgroundColor="#f0f6ff" fontColor="#00000" shadow :openType="'getPhoneNumber'" @getphonenumber="decryptPhoneNumber">
<!--                  <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>-->
                  <text class="tn-text-lg tn-text-bold">点击登录</text>
                </tn-button>
                 <text v-if="isLogin" :class="true ? 'tn-bg-green' : 'tn-bg-red'" class=" tn-round tn-text-xs tn-color-white tn-margin-left-sm" style="padding: 10rpx 20rpx;" @click="tn('/minePages/realname')">
                  {{ true ? '已认证' : '未认证'}}
                </text>
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis" v-if="isLogin">
                <text class="tn-color-gray">{{isLogin ? '高级UI设计' : '请先登录'}}</text>
                <text class="tn-color-gray tn-padding-left-sm tn-text-sm">{{isLogin ? this.userInfo.phone : '请先登录'}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="justify-content-item"  @click="tn('/myPages/set')">
          <view class="tn-icon-right tn-color-gray">
          </view>
        </view>
      </view>

      <view class="tn-flex">
        <view class="tn-flex-direction-column tn-col-6 tn-text-center" v-for="(item,index) in setting" :key="index">
          <view>
            <image :src="item.icon" style="width: 90rpx;height: 90rpx"/>
          </view>
          <view class="tn-margin-top-xs">
            <text class="tn-text-xs tn-color-gray">{{ item.title }}</text>
          </view>
        </view>
      </view>

<!--      <view class="tn-margin-top-xl">-->
<!--        <view class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">-->
<!--          <view class="tn-margin-left">-->
<!--            <view class='title' style="color: #F1C68E;">-->
<!--              <text class="tn-text-bold tn-text-xl">送好友租房福利</text>-->
<!--              &lt;!&ndash; <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text> &ndash;&gt;-->
<!--            </view>-->
<!--            <view class='tn-color-white tn-text-sm tn-padding-top-sm'>得300元邀请奖励</view>-->
<!--          </view>-->
<!--          <view class="tn-margin-right">-->
<!--            <tn-button shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0" width="160rpx" shadow open-type="share">-->
<!--              &lt;!&ndash; <text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text> &ndash;&gt;-->
<!--              <text class="tn-text-bold">邀 请</text>-->
<!--            </tn-button>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 方式15 start-->
      <view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl">
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/discoveryPages/edit')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;">
              <view class="tn-icon-bankcard"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">账单</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/circlePages/circle')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;">
              <view class="tn-icon-relation"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">报修</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/circlePages/circle')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;">
              <view class="tn-icon-unlock"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">乐开门</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/myPages/settingDetail')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;">
              <view class="tn-icon-set"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">设置</text>
            </view>
          </view>
        </view>
      </view>

      <view class="about-shadow tn-margin-top-lg tn-padding-bottom-sm tn-bg-white">
        <view class="tn-padding">
          <text class="tn-text-bold tn-text-md">入驻指南</text>
          <view class="tn-padding-top-sm">
            <image src="https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/Snipaste_2023-02-14_18-27-02.png" style="height: 200rpx;border-radius: 5px;"></image>
          </view>
        </view>
      </view>

      <view class="about-shadow tn-margin-top-lg tn-padding-bottom-sm tn-bg-white">
        <view class="tn-padding tn-flex-row-between tn-flex">
          <text class="tn-text-bold tn-text-md">放心生活</text>
          <text class="tn-text-sm tn-color-gray">有料天天不一样<text class="tn-icon-right"></text></text>
        </view>
      </view>

<!--      &lt;!&ndash; 更多信息&ndash;&gt;-->
<!--      &lt;!&ndash; 方式12 start&ndash;&gt;-->
<!--      <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">-->
<!--        <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-cube tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">闲置物品</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-signpost tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">已晒帖子</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-refund tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">提现记录</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/messagePages/chat')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-constellation tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">智能助手</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--        <view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/discoveryPages/order')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-order tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">商品订单</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/integral')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-calendar tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">积分签到</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="navAddress">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-map tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">收货地址</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/set')">-->
<!--            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">-->
<!--              <view class="icon12__item&#45;&#45;icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey&#45;&#45;light">-->
<!--                <view class="tn-icon-set tn-color-cat"></view>-->
<!--              </view>-->
<!--              <view class="tn-text-center">-->
<!--                <text class="tn-text-ellipsis">系统设置</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->


      <!-- 更多信息-->


    </view>

    <view class='tn-tabbar-height'></view>
    <tn-toast ref="toast"></tn-toast>
  </view>
</template>

<script>
export default {
  name: 'Mine',
  data() {
    return {
      isLogin: false,
      userInfo: {},
      setting: [
        {title: "关注",icon: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/gz.png'},
        {title: "足迹",icon: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/zj.png'},
        {title: "预定",icon: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/yd.png'},
        {title: "优惠券",icon: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/yhj.png'},
        {title: "钱包",icon: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/my/qb.png'}
      ]
    }
  },
  onLoad() {

  },
  methods: {
    decryptPhoneNumber(e){
      let _this = this;
      uni.login({
        provider: 'weixin', //使用微信登录
        success: function (loginRes) {
          _this.$api.login({code: loginRes.code,phoneCode: e.code}).then(res =>{
            _this.userInfo.phone = res.data;
            _this.isLogin = true;
            _this.$refs.toast.show({
              title: '登录成功',
              icon: 'success',
              image: '',
              duration: 1500
            })
          })
        }
      });
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.mine{
  max-height: 100vh;
}
/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-color-cat{
  color: #1D2541;
}
.tn-bg-cat{
  background-color: #1D2541;
}


/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;

  &__back {
    margin: auto 5rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    flex-basis: 5%;
    width: 100rpx;
    position: absolute;
  }
}
/* 自定义导航栏内容 end */


/* 顶部背景图 end */


/* 用户头像 start */
.logo-image {
  width: 110rpx;
  height: 110rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 8rpx solid rgba(255,255,255,0.05);
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 页面 start*/
.about-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {

  &__wrap {
    position: relative;
    z-index: 1;
    margin: 20rpx 30rpx;
  }
}

/* 页面 end*/

/* 图标容器15 start */
.icon15 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;


      }
    }
  }
}

/* 图标容器12 start */
.tn-three{
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
  text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}
.icon20 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
      }
    }
  }
}



.button-vip {
  width: 100%;
  height: 150rpx;
  border-radius: 15rpx;
  position: relative;
  z-index: 1;

  &::after {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
  }
}


/* 图标容器12 start */
.icon12 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 15rpx;
      height: 15rpx;
      font-size: 50rpx;
      border-radius: 50%;
      margin-bottom: 38rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;

      }
    }
  }
}

/* 图标容器1 start */
.icon1 {
  &__item {
    // width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 40rpx;
      height: 40rpx;
      font-size: 40rpx;
      border-radius: 50%;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
      }
    }
  }
}

/* 图标容器1 end */


/* 顶部背景图 start */
.top-backgroup {
  height: 450rpx;
  z-index: -1;

  .backgroud-image {
    width: 100%;
    height: 450rpx;
    // z-index: -1;
  }
}

/* 顶部背景图 end */


</style>
